<template>
	<div class="preson-box">
		<div class="scoll-box">
			<Header :title="title"/>
			<div class="div">
				<div v-for="(item,index) in personData" :key="index">
					<Input :names="item.designation" :infor="item.numval"/>
				</div>
			</div>
			<Button :btitle="btitle"/>
		</div>
	</div>
</template>

<script>
	import Input from '../components/Input.vue'
	import Header from '../components/Header.vue'
	import Button from '../components/button.vue'
	
	export default{
		data(){
			return {
				title:'健康档案卡',
				btitle:'保存',
				personData:[
					{
						designation:'作息时间',
						numval:'请输入' 
					},
					{
						designation:'喜欢食物',
						numval:'米饭' 
					},
					{
						designation:'喜欢饮品',
						numval:'果汁' 
					},
					{
						designation:'平时做何种运动',
						numval:'请输入' 
					},
					{
						designation:'健康状况',
						numval:'请输入' 
					},
					{
						designation:'经常用降压药吗',
						numval:'请输入' 
					},
					{
						designation:'身高(cm)',
						numval:'请输入' 
					},
					{
						designation:'体重(kg)',
						numval:'请输入' 
					},
					{
						designation:'脂肪量',
						numval:'请输入' 
					},
				]
			}
		},
		components:{
			Input,
			Header,
			Button
		},
	}
</script>

<style scoped>
	.preson-box{
		width: 100%;
		height: 100vh;
	}
	.scoll-box{
		width: 100%;
		height: 500px;
		overflow: scroll;
	}
	.persontop{
		width: 100%;
		height: 111px;
		background: #fff;
	}
	.allperson{
		width: 92%;
		height: 100%;
		margin: auto;
		display: flex;
	}
	.personLest{
		width: 140px;
		height: 90px;
		border-radius: 10px;
		background: #333;
		text-align: center;
		line-height: 90px;
		font-size: 13px;
		margin: 0;
		padding: 0;
		float: left;
	}
	.personRight{
		width: 165px;
		height: 90px;
		float: right;
	}
	.personRight span{
		display: inline-block;
	}
	.edit,.approve{
		width: 70px;
		height: 30px;
		border-radius: 10px;
		background:#1177dc;
		color:#fff;
		font-size: 14px;
	}
	.approve{
		background:#ff6600;
	}
	.doneinfor span:nth-child(1){
		width: 118px;
		height: 14px;
		background: #333333;
	}
	.doneinfor span:nth-child(2){
		width: 42px;
		height: 11px;
		border:1px solid #333333;
	}
</style>
